<!--  -->
<template ref="el">
  <Hotlist class="xixixi" v-if="y>=1200"></Hotlist>
  <!-- 广告 -->
  <div class="ad" v-if="cloor">
    <div class="close" @click="cloor = !cloor"></div>
  </div>

  <div class="box">
    <!-- 头 -->
    <div class="hea">
      <h2>今日要闻</h2>
      <div class="date">
        <span>2023年9月26日星期二</span>
        <span class="hhh">青岛市21°阴</span>
        <el-icon style="font-size: 23px; ">
          <MostlyCloudy />
        </el-icon>
      </div>
    </div>
    <!-- 左 -->
    <div class="lef">
      <div class="news">
        <h3 class="hhh">习近平总书记浙鲁行 |总书记的一周（9月18日—9月24日）</h3>
        <h3 class="hhh"> 始终干在实处 走在前列 勇立潮头 |枣庄的石榴</h3>
        <h3 class="hhh">500强入围门槛达275.78亿元 民营经济质效稳步提升</h3>
        <h3 class="hhh">《携手构建人类命运共同体：中国的倡议与行动》白皮书</h3>
        <h3 class="hhh"> 见证历史一刻</h3>
      </div>
      <div class="jing">
        <h3>热点精选</h3>
        <Weis v-for="(item, index) in arr" :tita=item :srcdata=imgarr[index] :key="item"></Weis>
        <Weis v-for="(item, index) in arr" :tita=item :srcdata=imgarr[index] :key="item"></Weis>
        <Weis v-for="(item, index) in arr" :tita=item :srcdata=imgarr[index] :key="item"></Weis>
      </div>
    </div>
    <!-- 右 -->
    <div class="rig">
      <!-- 第一块 -->
      <Hotlist></Hotlist>
      <!-- 第二块 -->
      <div class="newwww">
        <div class="lun">
          <div class="block text-center">
            <el-carousel height="170px">
              <el-carousel-item v-for="item in lunarr" :key="item">
                <div style="width: 326px; height: 170px;" class="lunbotudic">
                   <img :src="item">
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="newssconten">
          <ul>
            <li v-for="item in lunxiaarr"><span>{{item}}</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script setup lang='js'>
import { ref, reactive } from 'vue'
import Weis from "./children/weis.vue";
import Hotlist from "./children/hotbang.vue";
import { useWindowScroll } from '@vueuse/core'

const el = ref(null)
const { x, y } = useWindowScroll(el)
const cloor = ref(true)
const arr = ref(['现场画面：菲律宾擅拆中国在黄岩岛海域设置的漂浮屏障', '清华教授：调休不如适当增加和延长假期，逢周末还是顺延不要调休', '美财政部以涉伊为由制裁中国实体和个人 商务部：立即停止无理打压', '内蒙古一楼盘施工时挖出煤层，官方：无开采潜力，将按原计划建设', '港股开盘：恒指跌0.38％，恒生科技指数跌0.42％，理想汽车跌超4%', '注意看这只狗叫强简繁，前天把他逮捕了，他哭着求我不要用502胶水'])
const imgarr = ref(['https://i.weather.com.cn/images/mobile/mtqtj/2021/07/22/2021072215411762C98ECFC01588378C025861E16CB19E.jpg',
  'https://ts1.cn.mm.bing.net/th/id/R-C.93c52f146c177a9cb85eb443279e5997?rik=C977ixNFVgn7NA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50053%2f7270.jpg_wh1200.jpg&ehk=XDEaB9Odv2uc7zcFD%2f5NiXhJAxFPSdHYncLPs2RI2k8%3d&risl=&pid=ImgRaw&r=0',
  'https://scpic.chinaz.net/files/pic/pic9/201812/zzpic15458.jpg',
  'https://ts1.cn.mm.bing.net/th/id/R-C.84a485f3c7c06e83ae2baa7cff5d732e?rik=glS0dIUfb6ZabQ&riu=http%3a%2f%2fimg3.redocn.com%2ftupian%2f20151113%2fbaidurentupiansucai_5311060.jpg&ehk=EpSMaWhcr0d0htJDCe9aSBspOtDqHUQoElDUFL4Ddss%3d&risl=&pid=ImgRaw&r=0',
  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=843747388,1661619151&fm=253&gp=0.jpg',
  'https://ts1.cn.mm.bing.net/th/id/R-C.8ce37665e600c4d772934472f117f14e?rik=1qWQ%2bvGGajn8QQ&riu=http%3a%2f%2fwww.52gougouwang.com%2fuploads%2fdog%2f130104%2f1-130104125553R0.jpg&ehk=jYYbCuIfLOlagmm14hBuKvHVIe0EFBNhcmKk3ISfDqY%3d&risl=&pid=ImgRaw&r=0'])

const lunarr = ref(['https://th.bing.com/th/id/R.1374a821688136b0e8b780b59356449e?rik=H70JXkI9e0IzrQ&riu=http%3a%2f%2fbbs.lvye.com%2fforum%2f202105%2f21%2f151652dagwrzi1wyf9jbwz.jpg&ehk=Opk0K4jPt2nam2CHyIFpWVPd7eXzX4zwFN6UFrlNHNo%3d&risl=&pid=ImgRaw&r=0',
  'https://pic4.zhimg.com/v2-8227a2f005c635b5141f0c1e4573c08b_r.jpg?source=1940ef5c',
  'https://th.bing.com/th/id/R.180e9a8e932315c5b04350b59178e005?rik=aol%2fGlrOdM9%2fpw&riu=http%3a%2f%2fimage.hnol.net%2fc%2f2019-05%2f28%2f22%2f2019052822450511-5486221.jpg&ehk=klWPfR23gSZm8BATDlxXE68o9VOYwB3QkGYBTHKP6XY%3d&risl=&pid=ImgRaw&r=0',
  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=843747388,1661619151&fm=253&gp=0.jpg'])

const lunxiaarr = ref([
'沃尔沃XC60，没有豪华比得上家人的安全',
'立即购买 一加 Ace 2 Pro',
'中骏商管2023半年报：毛利率34.2%，已开业12座购物中心',
'有车0接管，有车撞马路牙子？小鹏G6、问界M5、理想L7智驾领航1000KM+大横评',
'招商银行发布《2023中国私人财富报告》',
'东风日产联手腾讯新闻，共创深度内容新高度，为用户带来资讯新体验'
])
</script>

<style  scoped>
.xixixi{
  position: fixed;
  top: 60px;
  right: 400px;
  width: 340px;

}
.box {
  width: 1020px;
  margin: 30px auto;
}

.box .hea {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgb(191, 204, 229);
}

.box .hea h2 {
  float: left;
  font-size: 23px;
  color: rgb(74, 132, 235);
}

.box .hea .date {
  position: relative;
  line-height: 69px;
  width: 260px;
  height: 100%;
  float: right;
  font-size: 14px;
  overflow: hidden;
}

.box .hea .date span {
  margin-right: 8px;
}

.box .hea .date .el-icon {
  position: absolute;
  bottom: 3px;
}

.close {
  width: 45px;
  height: 20px;
  position: absolute;
  right: 0;
}

.ad {
  width: 1000px;
  height: 90px;
  margin: 0 auto;
  background: url(@/img/ad1.png) no-repeat;
  position: relative;
}

.hhh:hover {
  color: rgb(0, 134, 247);
}

.rig {
  width: 32%;
  float: left;
}

.lef {
  width: 68%;
  float: left;
}

.lef .news {
  width: 100%;
  height: 330px;
  padding-top: 40px;
  border-bottom: 1px solid rgb(191, 204, 229);
}

.lef .news h3 {
  font-size: 20px;
  margin-bottom: 33px;
}

.lef .news h3:nth-child(n+3) {
  font-weight: 400;
}

.jing {
  width: 100%;
}

.jing h3 {
  margin-top: 6px;
  color: rgb(0, 125, 235);
}

.newwww {
  width: 100%;
  height: 550px;
}

.lun {
  width: 100%;
  height: 170px;
  overflow: hidden;
}

.newssconten {
  width: 100%;
  height: 380px;
}
.newssconten ul{
  margin-top: 10px;
  margin-left: 30px;
  color: rgb(64, 137, 242);
  font-size: 14px;
  line-height: 23px;
}
.newssconten ul li span{
  color: black;
  font-size: 14px;
}
.newssconten ul li:hover span{
  color: rgb(0, 134, 247);
}
.lunbotudic img{
  width: 100%;
  height: 100%;
}
</style>
